<template>
  <div class="home-container">
    <van-nav-bar fixed placeholder>
      <!-- 左侧插槽 -->
      <template #left>
        <div class="logo"></div>
      </template>

      <!-- 右侧插槽 -->
      <template #right>
        <van-button
          icon="search"
          round
          type="primary"
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <!-- 标签页 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channel" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- 列表页 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id"
              :title="item.title"
              @click="
                $router.push({ path: '/myarticle', query: { id: item.art_id } })
              "
            >
              <template #label>
                <van-grid :border="false" :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(value, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image :src="value" lazy-load />
                  </van-grid-item>
                </van-grid>

                <div>
                  <span>{{ item.aut_name }}</span
                  >&nbsp; <span>{{ item.comm_count }}评论</span>&nbsp;
                  <span>{{ item.pubdate | fromNow }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChannelList, getArticleList } from "./home.js";

//导入moment
// import moment from "moment";
//设置语言
// moment.locale("zh-cn");
export default {
  name: "home",
  data() {
    return {
      active: 1,
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      channel: [], // 频道列表
      timestamp: "",
    };
  },

  // 设置时间过滤器，
  // filters: {
  //   fromNow(value) {
  //     return moment(value).fromNow();
  //   },
  // },
  async created() {
    let res = await getChannelList();
    this.channel = res.data.data.channels;
  },

  methods: {
    async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求

      // 判断是不是第一页
      if (!this.timestamp) {
        this.timestamp = Date.now();
      }

      // 请求数据
      let res = await getArticleList({
        channel_id: this.channel[this.active].id,
        timestamp: this.timestamp,
      });
      // console.log(res);
      // 绑定数据
      this.timestamp = res.data.data.pre_timestamp;
      this.list.push(...res.data.data.results);

      // 加载状态结束
      this.loading = false;

      // 数据全部加载完成
      if (this.list.length >= 40) {
        this.finished = true;
      }
    },
    onRefresh() {
      // 清空当前时间戳
      this.timestamp = null;

      //
      this.finished = false;
      // 下拉刷新，清空当前数据
      this.list = [];

      // 重新加载数据
      this.loading = true;
      this.onLoad();

      // 关闭下拉刷新动画，不然顶部会一直转圈
      this.isLoading = false;
    },

    /* 3.tab栏点击 */
    tabClick() {
      //tab栏点击相当于下拉刷新请求新的数据
      this.onRefresh();
    },
  },
};
</script>

<style lang='less'>
.home-container {
  // 首页导航栏样式
  .van-nav-bar {
    background-color: #029dfa;
    height: 46px;
    .logo {
      width: 100px;
      height: 30px;
      background: url("~@/assets/logo.png");
      background-size: cover;
    }
    .van-button {
      width: 100px;
      height: 30px;
      background-color: #00b0fc;
      border: 1px solid transparent;
      .van-icon {
        color: #fff;
      }
    }
  }

  // 标签页样式
  .van-tabs__wrap {
    position: fixed;
    top: 46px;
    z-index: 99;
    width: 100%;
  }
  .van-tabs__content {
    margin-top: 44px;
  }
}
</style>